<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">传感器数据</div>
    </nav-bar>

    <div class="switch_name">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label=""
        right-icon="arrow-down"
        placeholder=""
        @click="showPicker = true"
      />
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <div class="charts">
      <!--空气温度传感器-->

        <div v-show="isShowTemperature" id="temperature" ref="temperature" style="height: 271px;width: 100%;background: white;border-radius: 6px;"> </div>

      <!--空气温度传感器-->

      <!--空气湿度传感器-->
      <div v-if="isShowWet" id="wet" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--空气湿度传感器-->
      <!--PM2.5传感器-->
      <div v-show="isShowPM" id="pm" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--PM2.5传感器-->
      <!--风速传感器-->
      <div v-show="isShowCloud" id="cloud" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风速传感器-->

      <!--风向传感器-->
      <div v-show="isShowDirection" id="direction" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风向传感器-->
      <!--土壤湿度传感器-->
      <div v-show="isShowSoil" id="soil" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--土壤湿度传感器-->
      <!--光照传感器-->
      <div v-show="isShowLight" id="light" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--光照传感器-->

    </div>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar"
  import echarts from 'echarts'

  export default {
    name: "sensor",
    components: {
      NavBar
    },
    data() {
      return {
        isShowTemperature:true,
        isShowWet:true,
        isShowPM:true,
        isShowCloud:true,
        isShowDirection:true,
        isShowSoil:true,
        isShowLight:true,
        sid: '',
        bid: '',
        pid: '',
        value: '',
        columns: [],
        showPicker: false,
        option1: {
          title: {
            text: '空气温度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: [],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '°C',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            // min: 0,
            // max: 40,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '空气温度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}°C'
              },
              data: [20, 21, 30, 29, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#4cdbbd",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#93e3da'
                    },
                      {
                        offset: 0.9,
                        color: '#2cc197'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts温度传感器图表配置项
        option2: {
          title: {
            text: '空气湿度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            // min: 0,
            // max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '空气湿度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}%'
              },
              data: [20, 60, 30, 29, 80],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#2381fd",//实心圆圈颜色
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#8db7ed'
                    },
                      {
                        offset: 0.9,
                        color: '#2381fd'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts空气湿度传感器图表配置项
        option3: {
          title: {
            text: 'PM2.5传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            // name:'μg/m³',
            nameTextStyle: {
              color: "#9fa7b3",
              // align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: 'PM2.5传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}'
              },
              data: [200, 66, 300, 90, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#fc656c",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e8b9be'
                    },
                      {
                        offset: 0.9,
                        color: '#fc656c'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echartsPM2.5传感器器图表配置项
        option4: {
          title: {
            text: '风速传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: 'km/h',
            nameTextStyle: {
              color: "#9fa7b3"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            // min: 0,
            //  max: 200,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '风速传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}km/h'
              },
              data: [50, 150, 120, 20, 130],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#8161e6",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#c2b7f3'
                    },
                      {
                        offset: 0.9,
                        color: '#8161e6'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts风速传感器图表配置项
        option5: {
          title: {
            text: '风向传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            //  min: 1,
            //  max: 8,
            axisLabel: {
              formatter: '风向{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '风向传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{b}风'
              },
              data: [
                {value: 1, name: '北'},
                {value: 6, name: '西南'},
                {value: 3, name: '东'},
                {value: 7, name: '西'},
                {value: 3, name: '东'},
              ],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#e8692f",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e6b39d'
                    },
                      {
                        offset: 0.9,
                        color: '#e8692f'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts风向传感器图表配置项
        option6: {
          title: {
            text: '土壤湿度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            // min: 0,
            //  max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '土壤湿度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}%'
              },
              data: [20, 60, 30, 29, 80],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#e4afcf",//实心圆圈颜色
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e72f8c'
                    },
                      {
                        offset: 0.9,
                        color: '#2381fd'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts土壤湿度传感器图表配置项
        option7: {
          title: {
            text: '光照传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: 'Lux',
            nameTextStyle: {
              color: "#9fa7b3"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            //  min: 0,
            //   max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '光照传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}Lux'
              },
              data: [20, 59, 80, 29, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#c67d54",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e2d0c7'
                    },
                      {
                        offset: 0.9,
                        color: '#c67d54'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts光照传感器图表配置项
      }
    },

    created() {
      this.pid = this.$route.query.pid;
      this.bid = this.$route.query.bid;
    },

    mounted() {
      console.log('mounted里SID', this.sid)
      this.getStageList()
      // this.creatTemperature();
      // this.creatWet();
      // this.creatPm();
      // this.creatCloud();
      // this.creatDirection();
      // this.creatSoil();
      // this.creatLight();
    },

    methods: {
      creatTemperature() {
        let that = this;
        console.log('调用里sid', that.sid)
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=2", null, r => {
          console.log('空气温度', r)
          if (r.data.length != 0) {
            let times = [];//日期数组
            let wendus = [];//温度数组
            r.data.forEach(function (v, i) {
              wendus.push(parseFloat(v.sources, 1));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("wendus:",wendus);
            // console.log("this.option1.xAxis.data:",this.option1.xAxis.data);
            // console.log("this.option1.series[0].data",this.option1.series[0].data);
            this.option1.xAxis.data = times.splice(-5);
            this.option1.series[0].data = wendus.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
           // let myChart = echarts.init(document.getElementById('temperature'));
            let myChart = echarts.init(this.$refs.temperature);
            myChart.setOption(this.option1);
          }else{
            that.isShowTemperature = false;
          }
        });

      },
      creatWet() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=3", null, r => {
           console.log("空气湿度:",r.data);
          if(r.data.length != 0){
          let times = [];//日期数组
          let shidus = [];//空气湿度数组
          r.data.forEach(function (v, i) {
            shidus.push(parseInt(parseInt(v.sources)));
            times.push(v.create_date.slice(5, 10).replace("-", "/"));
          });
          // console.log("times:",times);
          // console.log("shidus:",shidus);
          this.option2.xAxis.data = times.splice(-5);
          this.option2.series[0].data = shidus.splice(-5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('wet'))
          myChart.setOption(this.option2);
          }else{
            that.isShowWet = false
          }
        });

      },
      creatPm() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=7", null, r => {
           console.log('pm2.5:',r);
           if(r.data.length != 0){
          let times = [];//日期数组
          let pms = [];//pm2.5数组
          r.data.forEach(function (v, i) {
            pms.push(parseFloat(v.sources) * 100);
            times.push(v.create_date.slice(5, 10).replace("-", "/"));
          });
          // console.log("times:",times);
          // console.log("pms:",pms);
          this.option3.xAxis.data = times.splice(-5);
          this.option3.series[0].data = pms.splice(-5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('pm'));
          myChart.setOption(this.option3);
           }else{
             that.isShowPM = false
           }
        });
      },
      creatCloud() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=5", null, r => {
           console.log("风速：",r.data);
          if(r.data.length != 0) {
            let times = [];//日期数组
            let fengsus = [];//风速数组
            r.data.forEach(function (v, i) {
              fengsus.push(parseInt(parseInt(v.sources)));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("fengsus:",fengsus);
            this.option4.xAxis.data = times.splice(-5);
            ;
            this.option4.series[0].data = fengsus.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('cloud'))
            myChart.setOption(this.option4);
          }else{
            that.isShowCloud = false
          }
        });

      },
      creatDirection() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=4", null, r => {
          console.log("风向:", r.data);
          if(r.data.length != 0){
          let times = [];//日期数组
          let fengxiangs = [];//风向数组
          r.data.forEach(function (v, i) {
            times.push(v.create_date.slice(5, 10).replace("-", "/"));
            // fengxiangs.push(parseInt(parseInt(v.sources)));
            switch (v.sources) {
              case '1':
                fengxiangs.push({value: 1, name: '北'});
                break;
              case '2':
                fengxiangs.push({value: 2, name: '东北'});
                break;
              case '3':
                fengxiangs.push({value: 3, name: '东'});
                break;
              case '4':
                fengxiangs.push({value: 4, name: '东南'});
                break;
              case '5':
                fengxiangs.push({value: 5, name: '南'});
                break;
              case '6':
                fengxiangs.push({value: 6, name: '西南'});
                break;
              case '7':
                fengxiangs.push({value: 7, name: '西'});
                break;
              default:
                fengxiangs.push({value: 8, name: '西北'});
            }
          });
          console.log("times:", times);
          console.log("fengxiangs :", fengxiangs);
          this.option5.xAxis.data = times.splice(-5);
          this.option5.series[0].data = fengxiangs.splice(-5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('direction'))
          myChart.setOption(this.option5);
          }else{
            that.isShowDirection = false
          }
        });
      },
      creatSoil() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=6", null, r => {
           console.log("土壤湿度:",r.data);
          if(r.data.length != 0){
          let times = [];//日期数组
          let soils = [];//土壤湿度数组
          r.data.forEach(function (v, i) {
            soils.push(parseInt(parseFloat(v.sources) * 100));
            times.push(v.create_date.slice(5, 10).replace("-", "/"));
          });
          // console.log("times:",times);
          // console.log("soils:",soils);
          this.option6.xAxis.data = times.splice(-5);
          this.option6.series[0].data = soils.splice(-5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('soil'))
          myChart.setOption(this.option6);
          }else{
            that.isShowSoil = false
          }
        });
      },
      creatLight() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getEquipmentLog?bid=" + that.bid + "&sid=" + that.sid + "&type=8", null, r => {
           console.log("光照：",r.data);
          if(r.data.length != 0){
            let times = [];//日期数组
            let lights = [];//光照数组
            r.data.forEach(function (v, i) {
              lights.push(parseInt(parseInt(v.sources)));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("lights:",lights);
            this.option7.xAxis.data = times.splice(-5);
            this.option7.series[0].data = lights.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('light'));
            myChart.setOption(this.option7);
          }else{
            that.isShowLight =false
          }
        });
      },

      //获取阶段
      getStageList() {
        let that = this;
        console.log('pid', that.pid)
        that.$http.get('/api/MobileAadminApi/getStageList', {pid: that.pid}, r => {
          console.log('阶段', r)
          that.value = r.data[0].name;
          that.sid = r.data[0].id;
          console.log('sid', that.sid)
          let Arr = [];
          r.data.map(item => {
            let Obj = {};
            Obj['sid'] = item.id;
            Obj['text'] = item.name
            Arr.push(Obj);
            return Arr;
          })
          this.columns = Arr
          console.log('阶段数组', Arr);

          this.creatTemperature();
          this.creatWet();
          this.creatPm();
          this.creatCloud();
          this.creatDirection();
          this.creatSoil();
          this.creatLight();

          //that.getVideoList(); // 调用视频列表
        })
      },

      onConfirm(value) {
        this.sid = value.sid;
        this.value = value.text;
        console.log('选择value', value)
        this.showPicker = false;
        this.isShowTemperature=true;
          this.isShowWet=true;
          this.isShowPM=true;
          this.isShowCloud=true;
          this.isShowDirection=true;
          this.isShowSoil=true;
          this.isShowLight=true;

        this.creatTemperature();
        this.creatWet();
        this.creatPm();
        this.creatCloud();
        this.creatDirection();
        this.creatSoil();
        this.creatLight();

      },
      goBack() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style scoped>
  .switch_name {
    padding: 10px;
    background: #ffffff;
  }

  .switch_name >>> .van-cell {
    padding: 10px;
    background: #f3f3f3;
    border-radius: 5px;
  }

  .charts {
    padding: 10px;
  }
</style>
